/**
 * @desc 休息日
 */
<template>
    <view class="work">
        <nut-tabs type="smile" v-model="tab1value">
            <nut-tabpane title="选择休息日">
                <nut-cell :show-icon="true" title="休息日期" :desc="date7 && date7.length ? `已选择${date7.length}个日期` : '请选择'"
                    @click="openSwitch('isVisible7')">
                </nut-cell>
                <view class="work-list">
                    <nut-tag :style="{ margin: '5px' }" v-for="(item, index) in date7" :key="item" closeable
                        color="#55acee" @close="close(index, 1)">{{ item }}</nut-tag>
                </view>
                <view class="work-btn">
                    <nut-button type="primary" @click="visible = true">保存</nut-button>
                </view>
            </nut-tabpane>
            <nut-tabpane title="历史记录">
                <nut-tag :style="{ margin: '5px' }" v-for="item in data" :key="item._id" type="primary"
                    :closeable="now <= new Date(`${item.time} 00:00:00`).getTime()" color="#55acee"
                    @close="close(item._id, 2)">{{
                            item.time
                    }}</nut-tag>
            </nut-tabpane>
        </nut-tabs>
        <nut-dialog title="提示" content="是否确认提交修改!" v-model:visible="visible" @cancel="onCancel" @ok="onOk" />
        <nut-calendar :visible="isVisible7" :default-value="date7" type="multiple" :start-date="startTime"
            @close="closeSwitch('isVisible7')" @choose="setChooseValue7">
        </nut-calendar>
    </view>
</template>

<script>
import db from '../../server/index';
import Taro from '@tarojs/taro';
export default {
    name: 'Work',
    data() {
        return {
            tab1value: '',
            lodList: [], // 历史记录
            date7: [],
            data: [],
            list: [],
            coachId: '',
            now: '',
            visible: false,
            startTime: '',
            isVisible7: false
        }
    },
    onPullDownRefresh() {
        Taro.showLoading({
            title: '加载中',
        })
        this.init()
    },
    created() {
        db.collection('coach').where({
            openid: Taro.getStorageSync('openid')
        }).get().then(({ data = [] }) => {
            this.coachId = data[0]._id
            this.init();
        })
    },
    methods: {
        openSwitch(param) {
            this[`${param}`] = true;
        },
        closeSwitch(param) {
            this[`${param}`] = false;
        },
        onCancel() {
            this.visible = false
        },
        init() {
            db.collection('work').where({
                coachId: this.coachId
            }).get().then(({ data = [] }) => {
                this.data = data;
                let a = new Date();
                let year = a.getFullYear();
                let month = (a.getMonth() + 1 + '').padStart(2, 0);
                let day = (a.getDate() + '').padStart(2, 0)
                this.startTime = `${year}-${month}-${day}`
                const start = new Date(`${year}-${month}-${day} 00:00:00`).getTime();
                this.now = start
                this.date7 = data.map(item => {
                    return start <= new Date(`${item.time} 00:00:00`) ? item.time : null
                })
                this.date7 = this.date7.filter(a => !!a)
                this.list = [...this.date7]
                Taro.stopPullDownRefresh();
                Taro.hideLoading();
            })
        },
        onOk() {
            // 删除被取消的数据 
            this.list.forEach(b => {
                if (!this.date7.includes(b)) {
                    db.collection('work').where({
                        time: b,
                        coachId: this.coachId
                    }).remove()
                }
            })
            //  新增没有的数据
            this.date7.forEach(item => {
                // 对比是否需要删除数据
                if (!this.list.some(a => a === item)) {
                    db.collection('work').add({
                        data: {
                            coachId: this.coachId,
                            time: item
                        }
                    })
                }
            })
            // 延迟刷新 
            setTimeout(() => {
                Taro.showToast({
                    title: '保存成功！',
                    icon: 'success',
                    duration: 2000,
                    mask: true
                })
                this.init();
            }, 1000);
        },
        setChooseValue7(chooseData) {
            let dateArr = chooseData.map((item) => {
                return item[3];
            });
            this.date7 = [...dateArr];
            console.log(this.date7)
        },
        close(id, type) {
            if (type === 1) {
                this.date7.splice(id, 1)
            } else {
                db.collection('work').where({
                    _id: id
                }).remove().then(() => {
                    this.init()
                    Taro.showToast({
                        title: '删除成功！',
                        icon: 'success',
                        duration: 2000,
                        mask: true
                    })
                })
            }
        }
    }

}
</script>

<style lang="less">
.work {
    &-btn {
        text-align: center;
        margin-top: 10px;
    }

    &-list {
        display: flex;
        flex-wrap: wrap;
    }
}
</style>
